<template>
    <div class="pie-box" :style="{width:width,height:height}" @mouseenter="stopData()" @mouseleave="startData()">

        <div @mouseenter="stop()" @mouseleave="start()" class="echarts" ref="echarts" :style="{height:height}"></div>

    </div>
</template>
<script>
    import mixincomon from '../../mixins/mixincomon';

    export default {
        name: "chart",
        mixins: [mixincomon],
        data() {
            return {
                rollDataValue: 0,
                options: {},

                currIndex: -1,
                setTimeFlag: null,
            }
        },
        props: {
            option: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            rollData: {
                type: Boolean,
                default: false,
            },
            rollDataText: {
                type: String,
                default: '隐患设备'
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.init();
            })
        },
        watch: {
            option: {
                handler: function(newData, oldData) {
                    this.init();
                },
                deep: true
            }
        },
        methods: {

            init() {
                !this.myChart & this.initChart('echarts');
                this.myChart.setOption(this.option);
                this.currIndex = -1
                this.setTime()
            },

            stopData() {
                this.setTimeFlag && clearTimeout(this.setTimeFlag);
            },
            
            startData() {
                this.setTime();
            },
            
            setTime() {
                this.setTimeFlag && clearTimeout(this.setTimeFlag);
                this.setTimeFlag = setInterval(() => {
                    this.currIndex++
                    if (this.currIndex == this.option.series.length) {
                        this.currIndex = 0
                    }

                    this.myChart.dispatchAction({
                        type: 'showTip', //提示框
                        seriesIndex: this.currIndex,
                        dataIndex: 0
                    });


                }, this.rollTime)
            }
        }
    }
</script>
<style lang="less" scoped>
    .pie-box {
        position: relative;

        .row-data {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 50%);
        }
    }

    .no-data-echarts {
        height: 100%;
        position: relative;

        span {
            left: 0;
            text-align: center;
            position: absolute;
            top: 45%;
        }
    }
</style>
